<template>
  <div id="box">
    <!-- -------- Header ---------- -->
    <div class="topbar">
      <img class="logo" src="~assets/avatars/zhizunbao.jpg" height="38" alt="">
      <div class="title">
        <span class="t-1">王者荣耀</span><br>
        <span class="t-2">团队成就更多</span>
      </div>
      <button class="download">
        <a href="#javascript:">立即下载</a>
      </button>
    </div>
    <!-- ---------- Tab ------------- -->
    <div class="nav">
      <div class="item" :class="{active : '/home' === this.$route.path}" @click="toPage('/home')">首页</div>
      <div class="item" :class="{active : '/gonglue' === this.$route.path}" @click="toPage('/gonglue')">攻略中心</div>
      <div class="item" :class="{active : '/saishi' === this.$route.path}" @click="toPage('/saishi')">赛事中心</div>
    </div>

    <!-- -------- MainContent ---------- -->
    <router-view />
  </div>
</template>

<script>
  export default {
    name: 'Main',
    data() {
      return {
        active: false,
      }
    },
    methods: {
      toPage(path) {
        this.$router.replace(path);
        if (path === this.$route.path) {
          this.active = true
        } else {
          this.active = false
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  // ---------- Header ------------
  .topbar {
    height: 49px;
    background-color: #343440;
    display: flex;
    align-items: center;
    padding: 0 15px;
    position: sticky;
    top: 0;
    z-index: 99;
    .logo {
      border-radius: 3px;
    }
    .title {
      flex: 1;
      margin-left: 10px;
      .t-1 {
        font-size: 14px;
        color: #fff;
      }
      .t-2 {
        font-size: 12px;
        color: #ccc;
      }
    }
    .download {
      height: 26px;
      background-color: #409eff;
      border: none;
      border-radius: 3px;
      a {
        color: #fff;
        text-decoration: none;
      }
    }
  }
  // ----------- Tab -------------
  .nav {
    width: 100%;
    display: flex;
    position: fixed;
    top: 48px;
    left: 0;
    right: 0;
    align-items: center;
    background-color: #409eff;
    height: 36px;
    justify-content: space-around;
    z-index: 9;
  }
  .item {
    text-align: center;
    font-size: 14px;
    color: #fff;
  }
  .active {
    font-size: 16px;
  }
</style>